<template>
	<div>
		<mj-title type="h2" title="Empty 空状态"></mj-title>
		<div class="page-desc">
			数据为空的显示状态
		</div>		

		<mj-title type="h5" title="基础使用"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML"  name="html">
				<mj-empty>读取页面失败或页面不存在，请刷新重试！</mj-empty>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
						&lt;template>
							&lt;mj-empty>读取页面失败或页面不存在，请刷新重试！&lt;/mj-empty>
						&lt;/template>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="尺寸"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML"  name="html">
				<mj-row>
				  	<mj-col md="4">
						<mj-empty size="small">无数据</mj-empty>
				  	</mj-col>
				  	<mj-col md="4">
						<mj-empty>无数据</mj-empty>
				  	</mj-col>
				  	<mj-col md="4">
						<mj-empty size="large">无数据</mj-empty>
				  	</mj-col>
				</mj-row>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-row>
						  	&lt;mj-col md="4">
								&lt;mj-empty size="small">无数据&lt;/mj-empty>
						  	&lt;/mj-col>
						  	&lt;mj-col md="4">
								&lt;mj-empty>无数据&lt;/mj-empty>
						  	&lt;/mj-col>
						  	&lt;mj-col md="4">
								&lt;mj-empty size="large">无数据&lt;/mj-empty>
						  	&lt;/mj-col>
						&lt;/mj-row>
					&lt;/template>

					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="API"></mj-title>
		<table class="api-table">

			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>size</td>
					<td>尺寸，可选<code>small</code>,<code>large</code>,默认普通大小</td>
					<td>String</td>
					<td>-</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>
